<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-23 22:50:57
 * @LastEditTime: 2022-04-25 23:04:16
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>React</title>
  <style>
    .box {
      background: orange;
    }
  </style>
</head>

<body>
  <div id="test"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>

  <script type="text/javascript" src="../js/react-dom.development.js"></script>

  <script type="text/javascript" src="../js/babel.min.js">
  </script>
  <script type="text/babel">
    const className = "box"
    const data = [1, 2, 3, 4, 5, 6, 7]
    // 渲染 js表达式 
    ReactDOM.render((
      <div className={className}>
        <ul>
          {data.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
        <span style={{ color: 'white', fontSize: 20 + 'px' }}> hello React</span>
        <input type="text" />
      </div>
    ), document.getElementById('test'))
/* 
    jsx 语法规则:
          1. 定义虚拟 DOM 时,不要写引号
          2. 标签中混入 JS 表达式时使用 {}
          3. 样式的类名使用 className
          4. 内联样式使用 style={{key:value}}
          5. 需要一个根标签
          6. 标签必须闭合
          7. 标签首字母
            (1). 若小写字母开头,则将改标签转换为 html
            (2). 若大写字母开头, React 会渲染对应的组件
    */

  </script>
</body>

</html>